<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		body, html, #allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>
	<script type="text/javascript"
					src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=KzmFqkWUs9MbKNwQqLUeCWF8giEWZnox"></script>
	<title>地图Icon展示</title>
</head>
<body>
<div id="allmap"></div>
<script>
  // GL版命名空间为BMapGL
  // 按住鼠标右键，修改倾斜角和角度
  let map = new BMapGL.Map("allmap");    // 创建Map实例
  let point = new BMapGL.Point(114.92, 27.81);
  map.centerAndZoom(point, 9);  // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  map.setMapStyleV2({
    styleId: '2d7d0f60611a17e710397d5d6ed7fb6c'
  });
  let myIcon = new BMapGL.Icon("https://www.youbaobao.xyz/datav-res/datav/location.png",
    new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(10, 10), //相对于中心点
      imageOffset: new BMapGL.Size(0, 0) // 相对于图片的偏移
    }
  );
  // 创建标注对象并添加到地图
  let marker = new BMapGL.Marker(point, {icon: myIcon});
  marker.addEventListener("click", function () {
    let opts = {
      width: 250,     // 信息窗口宽度
      height: 100,    // 信息窗口高度
      title: "标题"  // 信息窗口标题
    }
    let html = "<div style='background-color: #2b47ff'>hello</div>"
    let infoWindow = new BMapGL.InfoWindow(html, opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, point);        // 打开信息窗口
  });
  map.addOverlay(marker);
  // let polyline = new BMapGL.Polyline([  线段
  //     new BMapGL.Point(114.92, 27.81),
  //     new BMapGL.Point(114.92, 27.1),
  //     new BMapGL.Point(113.92, 26.2)
  //   ], {
  //     strokeColor: "blue",
  //     strokeWeight: 2,
  //     strokeOpacity: 0.5
  //   },);
 // map.addOverlay(polyline);
  let polygon = new BMapGL.Polygon([ //点之间的连接图型
      new BMapGL.Point(114.92, 27.81),
      new BMapGL.Point(114.92, 27.1),
      new BMapGL.Point(113.92, 26.2)
    ], {
      strokeColor: "red",
      strokeWeight: 2,
			fillColor:"#fff",
      strokeOpacity: 0.5
    },);
  map.addOverlay(polygon);
  let content = "欢迎来到百度地图";
  let label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(20, 20)           // 设置标注的偏移量
  });
  label.setStyle({                              // 设置label的样式
    width: '100px',
    height: '20px',
    padding: '20px',
    color: '#fff',
    fontSize: '20px',
    border: '2px solid #1E90FF',
    background: 'red',
    whiteSpace: 'wrap',
    overflow: 'hidden',
    lineHeight: '20px'
  });
  label.addEventListener('click', function (e) {
    alert(e.target.content);
  });
  map.addOverlay(label);
</script>
</body>
</html>
